.novel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .novel_body {
    width: 100%;
    height: 94%;
    overflow: auto;

    .bookshelf {
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;

      .bookshelf_title {
        width: 100%;
        height: 5%;
        color: #999999;
        padding-left: 5vw;
        font-size: 1.125rem;
        border-bottom: 1px solid rgba(205, 205, 205, 0.4);
        border-top: 1px solid #ffffff;
        margin-top: 4vw;
      }

      .bookshelf_ul_box {
        width: 100%;
        height: 92%;
        margin-bottom: 0;
        overflow: auto;

        .bookshelfBoxFalse {
          width: 90%;
          height: 10vw;
          margin: 0 auto;
          padding-left: 10vw;
          color: #969ba3;
          list-style: none;
          font-size: 1.25rem;
          line-height: 10vw;
        }

        .bookshelf_ul_box_li {
          width: 90%;
          height: auto;
          border-right: 3px solid rgba(0, 0, 0, 0.2);
          margin: 5vw auto;
          list-style: none;
          display: flex;
          border-radius: 5px;

          .bookshelf_ul_box_li_left {
            width: 21%;
            height: 100%;

            img {
              width: 100%;
            }
          }

          .bookshelf_ul_box_li_right {
            width: 79%;
            height: 100%;
            padding-left: 4vw;
            position: relative;

            .bookshelf_ul_box_li_right_action {
              width: 100%;
              height: 8vw;
              overflow: hidden;
              color: #969ba3;
              line-height: 8vw;
            }

            .bookshelf_zhangjie {
              width: 100%;
              height: 8vw;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; //溢出不换行
              display: flex;
              color: #969ba3;
              line-height: 8vw;
              margin-top: 2vw;

              em {
                margin: 0 .625rem;
                font-weight: 600;
              }
            }

            .bookshelf_box_delete {
              width: 6vw;
              position: absolute;
              top: 2vw;
              right: 10vw;
            }
          }
        }
      }
    }

    .homeH {
      width: 100%;
      height: 100%;

      // 主页所有设置

      .homeHCarousel {
        width: 92%;
        height: 40vw;
        margin: 2vw auto;
        margin-bottom: 1vw;

        .homeHCarouselBoxImg {
          width: 100%;
        }
      }

      .homeH_bottom {
        width: 100%;
        height: 15vw;

        p {
          text-align: center;
          color: #969ba3;
          font-size: .875rem;
          margin-bottom: 0;
        }
      }

      .homeHInput {
        border: 1px solid rgba(0, 0, 0, 0.2);
        width: 90%;
        margin: 0 auto;
        border-radius: 5px;
        color: #999999;
        display: block;
        margin-bottom: 3vw;
      }

      .homeH_body_list {
        width: 90%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 3vw;

        .homeH_body_list_h3 {
          border-left: 3px solid #ed424b;
          color: #999999;
          padding-left: 4vw;
          margin-bottom: 4vw;
          font-weight: 600;

          span {
            padding-left: 3vw;
            font-size: 0.5rem;
          }
        }

        .homeH_body_list_ul {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0;
          overflow: auto;

          li {
            width: 20%;
            height: 100%;
            list-style: none;

            img {
              width: 100%;
            }

            h3 {
              margin-bottom: 0;
              color: #969ba3;
              width: 100%;
              height: 10vw;
              font-size: 0.6rem;
              overflow: hidden;
              padding: 1px;
            }
          }
        }
      }

      .homeH_body {
        width: 90%;
        height: auto;
        margin: 0 auto;

        >h3 {
          border-left: 2px solid #ed424b;
          color: #999999;
          padding-left: 4vw;
          margin-bottom: 5vw;
          font-weight: 600;

          span {
            padding-left: 3vw;
            font-size: 0.5rem;
          }
        }

        .homeH_body_ul {
          width: 100%;
          height: auto;
          list-style: none;
          margin-bottom: 0;

          li {
            display: flex;
            width: 100%;
            height: 100%;
            margin-bottom: 8vw;

            .homeH_body_boxImg {
              width: 20%;
              height: 100%;

              img {
                width: 100%;
              }
            }

            .homeH_body_box {
              width: 80%;
              height: 100%;
              padding-left: .8rem;

              h2 {
                width: 100%;
                height: 6vw;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap; //溢出不换行
                font-size: 1rem;
                color: #000000;
                margin-bottom: 0;
                font-weight: 600;
              }

              .homeH_body_box_const {
                width: 100%;
                height: 10vw;
                color: #666;
                overflow: hidden;
                margin: 1vw 0;
                font-size: 0.8rem;
                text-overflow: ellipsis;
                color: #969ba3;
              }

              .homeH_body_box_bottom {
                width: 100%;
                height: 5vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 2vw;

                .homeH_body_box_bottom_active {
                  width: 8rem;
                  height: 100%;
                  line-height: 5vw;
                  color: #999999;
                  overflow: hidden; //超出的文本隐藏
                  text-overflow: ellipsis; //溢出用省略号显示
                  white-space: nowrap; //溢出不换行
                }

                .homeH_body_box_bottom_style {
                  border: 1px solid #cccccc;
                  margin-right: 5vw;
                  padding: 0 6px;
                  border-radius: 5px;
                  color: #cccccc;
                }
              }
            }
          }
        }
      }
    }
  }

  .novel_buttom {
    position: absolute;
    width: 100%;
    height: 6%;
    bottom: 0;
    left: 0;
    display: flex;
    background: #ffffff;
    z-index: 999;

    .border {
      background: rgba(204, 204, 204, 0.4) !important;
    }

    .novel_buttom_left {
      width: 50%;
      height: 100%;

      img {
        display: block;
        margin: 1vh auto;
      }
    }
  }

  // 删除的对话框
  .bookshelfDeleete {
    .ant-modal-content {
      border-radius: 3vw;
      width: 75%;
      right: -14%;

      .bookshelfDeleete_body {
        width: 100%;
        height: 60%;
        text-align: center;
        line-height: 22vw;
        font-size: 1.25rem;
        font-weight: 600;
      }

      .bookshelfDeleete_caozuo {
        width: 100%;
        height: 40%;
        display: flex;

        .bookshelfDeleete_Cancel,
        .bookshelfDeleete_Ok {
          width: 50%;
          height: 100%;
          text-align: center;
          line-height: 12vw;
          font-size: 1.25rem;
        }

        .bookshelfDeleete_Ok {
          color: #ed424b;
        }
      }
    }
  }
}